<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>系统列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}"/>
</head>
<body>
<div id="search_block">
    <label class="layui-form-label">系统名称:</label>
    <div class="layui-input-inline">
        <input type="tel" id="system_name" name="system_name" autocomplete="off" class="layui-input">

    </div>
    <button class="layui-btn layui-btn-normal" id="search_button">搜索</button>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>系统列表</legend>
</fieldset>

<!-- 接入系统列表,懒加载 -->
<div id="lay_load_system">

</div>
</body>

<script th:src="@{/static/layui/layui.all.js}"></script>
<script type="text/javascript" th:inline="javascript">

    // <![CDATA[
    var ctxPath = /*[[@{/}]]*/ '';
    layui.use('flow', function() {
        var flow = layui.flow,$ = layui.$;

        flow.load({
            elem: '#lay_load_system' //流加载容器
            , scrollElem: '#lay_load_system' //滚动条所在元素，一般不用填，此处只是演示需要。
            , done: function (page, next) { //执行下一页的回调

                $.ajax({
                    url : ctxPath + 'system/pageList',
                    type : 'get',
                    data : {page:page,limit : 6,systemName:$('#system_name').val()},
                    dataType : 'json',
                    success : function (res) {

                        var list = res.data;
                        var lis = [];
                        lis.push(' <div class="layui-row" >');
                        for (var i = 0; i < list.length; i++) {
                            var content = list[i];
                            var html = '<div class="layui-col-xs2">' +
                            '            <div class="system_block" onclick="openPage(\''+ content.systemUrl +'\')">' +
                            '                <img src="' + ctxPath +  'file/download/' + content.photoId + '" style="width: 90%;height: 90%;margin: 5%">' +
                            '                <div class="system_name">' + content.systemName + '</div>' +
                            '            </div>\n' +
                            '        </div>'
                            lis.push(html)

                            if((i + 1) % 6 == 0){
                                lis.push('</div>');
                                lis.push(' <div class="layui-row" >');
                            }
                        }
                        lis.push('</div>');

                        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                        next(lis.join(''), page < res.count); //假设总页数为 10
                    }
                });



            }
        });

        // 搜索点击事件
        $('#search_button').click(function () {
            $('#lay_load_system').html('');
            flow.load({
                elem: '#lay_load_system' //流加载容器
                , scrollElem: '#lay_load_system' //滚动条所在元素，一般不用填，此处只是演示需要。
                , done: function (page, next) { //执行下一页的回调

                    $.ajax({
                        url : ctxPath + 'system/pageList',
                        type : 'get',
                        data : {page:page,limit : 6,systemName:$('#system_name').val()},
                        dataType : 'json',
                        success : function (res) {

                            var list = res.data;
                            var lis = [];
                            lis.push(' <div class="layui-row" >');
                            for (var i = 0; i < list.length; i++) {
                                var content = list[i];
                                var html = '<div class="layui-col-xs2">' +
                                    '            <div class="system_block" onclick="openPage(\''+ content.systemUrl +'\')">' +
                                    '                <img src="' + ctxPath +  'file/download/' + content.photoId + '" style="width: 90%;height: 90%;margin: 5%">' +
                                    '                <div class="system_name">' + content.systemName + '</div>' +
                                    '            </div>\n' +
                                    '        </div>'
                                lis.push(html)

                                if((i + 1) % 6 == 0){
                                    lis.push('</div>');
                                    lis.push(' <div class="layui-row" >');
                                }
                            }
                            lis.push('</div>');

                            //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                            //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                            next(lis.join(''), page < res.count); //假设总页数为 10
                        }
                    });



                }
            });
        });
    });
    /**
     * 打开一个新页面
     * @param url
     */
    function openPage(url) {
        window.open(url);
    }

    // ]]>
</script>
<style>
    .system_name{
        text-align: center;
    }
    .system_block{
        cursor: pointer;
    }
</style>
</html>